<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue3中，Vue不再是一个构造函数，无法通过 new Vue() 的方式来实现 中央事件总线。

      介绍 mitt 的使用：

        1. 引入 mitt    https://unpkg.com/mitt/dist/mitt.umd.js
        2. 调用 mitt() 得到 eventBus
        3. 使用 eventBus.on() 来订阅事件
        4. 使用 eventBus.emit() 来发布事件
        5. 使用 eventBus.off() 来取消订阅

     -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script src="../lib/mitt.umd.js"></script>

    <script>
      const eventBus = mitt();
      console.log("eventBus", eventBus);

      const Hello = {
        data() {
          return {
            count: 10,
          };
        },
        template: `
          <div>
            <p>Hello - {{ count }}</p>
          </div>
        `,
        created() {
          // 通过 eventBus.on 来订阅消息
          eventBus.on("abcd", (payload) => {
            console.log("abcd 被触发了", payload);
            this.count++;
          });
        },
        unmounted() {
          console.log("unmounted");
          // 通过 eventBus.off 来取消订阅
          eventBus.off("abcd");
        },
      };

      const World = {
        template: `
          <div>
            <p>World</p>
            <button @click="fn1">Hello count++</button>
          </div>
        `,
        methods: {
          fn1() {
            // 通过 eventBus.emit() 来发布消息
            eventBus.emit("abcd", "张三");
          },
        },
      };

      const App = {
        data() {
          return {
            isShowHello: true,
          };
        },
        template: `
          <div>
            <Hello v-if="isShowHello" />

            <World />
          </div>
        `,
        components: {
          Hello,
          World,
        },
      };

      const app = Vue.createApp(App);
      app.mount("#app");
    </script>
  </body>
</html>
